<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>Alice</li>
    <li>Bob</li>
</ul>
<button onclick="test()">测试</button>
<script type="text/javascript"src="jquery-2.1.4.js"></script>
<script type="text/javascript">
    function test(){
        var li = document.getElementsByTagName("li")[0];  //ul中的第一个li节点
        console.log(document.getElementsByTagName("li")[0].innerText) // 显示Alice
        var newFrag = document.createDocumentFragment();
        newFrag.appendChild(li);

        console.log(document.getElementsByTagName('li')[0].innerText) // 显示Bod
        console.log(document.getElementsByTagName('ul')[0].innerHTML) //显示<li>Bob</li>,由此可见，第一个节点确实被删除了
        console.log(newFrag.childNodes)
    //现在fragment中的修改节点
        newFrag.childNodes[0].childNodes[0].nodeValue='Candy';
    //更改一个孩子节点的文本内容
    // .childNodes[0].nodeValue等同于：.innerText  或.textContent

    document.getElementsByTagName('ul')[0].appendChild(newFrag);
    console.log(document.getElementsByTagName('ul')[0].innerHTML)} //显示<li>Bob</li><li>Candy</li>  ,由此可见仅仅是添加了newFrag的子孙节点。
    var arr=['a','bb','ccc','dd','eeee','ff','gg'];

    function fun(arr) {
        var obj={};
        for(var i=0,len=arr.length;i<len;i++){
            if(obj.hasOwnProperty([arr[i].length])){
                obj[arr[i].length].push(arr[i])
            }else {
                obj[arr[i].length]=[arr[i]]
            }
        }
        return obj
    }
    console.log(fun(arr));

</script>
</body>
</html>